<template>
  <div>
    <a-card>
      <div class="text-xl font-bold mb-4">报修管理</div>
      <a-row :gutter="[32, 8]">
        <a-col :span="12">
          立即报修

          <a-form
            ref="formRef"
            :model="repairForm"
            :label-col="{ span: 4 }"
            :wrapper-col="{ span: 24 }"
            class="border border-gray-200 solid"
          >
            <a-form-item
              label="订单号"
              name="order_no"
              :rules="[
                ruleStore.getRule('order_no')
                  ? ruleStore.getRule('order_no')
                  : { required: false },
              ]"
            >
              <a-input v-model:value="repairForm.order_no" disabled></a-input>
            </a-form-item>
            <a-form-item
              label="报修类型"
              name="way"
              :rules="[
                ruleStore.getRule('way')
                  ? ruleStore.getRule('way')
                  : { required: false },
              ]"
            >
              <a-radio-group @change="changeWay" v-model:value="repairForm.way">
                <a-radio :value="1"> 正常 </a-radio>
                <a-radio :value="2"> 现场抢修 </a-radio>
              </a-radio-group>
            </a-form-item>

            <a-form-item
              label="联系人"
              name="user_name"
              :rules="[
                ruleStore.getRule('user_name')
                  ? ruleStore.getRule('user_name')
                  : { required: false },
              ]"
            >
              <a-input v-model:value="repairForm.user_name"></a-input>
            </a-form-item>
            <a-form-item
              label="联系电话"
              name="phone"
              :rules="[
                ruleStore.getRule('phone')
                  ? ruleStore.getRule('phone')
                  : { required: false },
              ]"
            >
              <a-input v-model:value="repairForm.phone"></a-input>
            </a-form-item>
           
            <a-form-item
              label="故障描述"
              name="description"
              :rules="[
                ruleStore.getRule('description')
                  ? ruleStore.getRule('description')
                  : { required: false },
              ]"
            >
              <a-textarea v-model:value="repairForm.description"></a-textarea>
            </a-form-item>
            <a-form-item
              label="车牌号"
              name="license"
              :rules="[
                ruleStore.getRule('license')
                  ? ruleStore.getRule('license')
                  : { required: false },
              ]"
            >
              <a-input v-model:value="repairForm.license"></a-input>
            </a-form-item>

            <a-form-item
              label="图片"
              name="images"
              :rules="[
                ruleStore.getRule('images')
                  ? ruleStore.getRule('images')
                  : { required: false },
              ]"
            >
              <UploadList v-model="repairForm.images"></UploadList>
            </a-form-item>

            <a-form-item
              name="coordinates"
              label="位置"
              v-if="repairForm.way == 2"
              :rules="[
                ruleStore.getRule('coordinates')
                  ? ruleStore.getRule('coordinates')
                  : { required: false },
              ]"
            >
              <div id="container"></div>

              【精度：{{ repairForm.coordinates?.coordinates[0] }} 纬度：{{
                repairForm.coordinates?.coordinates[1]
              }}】
              <div>地址：{{ repairForm.address }}</div>
            </a-form-item>
            <a-form-item :wrapper-col="{ offset: 4, span: 2 }">
              <a-button type="primary" style="width: 100px" @click="onSubmit"
                >提交</a-button
              >
            </a-form-item>
          </a-form>
        </a-col>
        <a-col :span="12">
          报修列表
          <vxe-grid ref="xGrid" v-bind="gridOptions" v-on="gridEvent">
          <template #way="{ row }">
           <a-tag color="success" v-if="row.way == 1"
                >正常报修</a-tag
              >
              <a-tag color="error"  v-else>现场抢修</a-tag>
          </template>
            <template #action="{ row }">
              <vxe-button
                status="primary"
                content="编辑"
                @click="editRow(row)"
              ></vxe-button>

              <vxe-button
                status="primary"
                content="删除"
                @click="remove(row)"
              ></vxe-button>
            </template>
          </vxe-grid>
        </a-col>
      </a-row>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import useRuleStore from "@/store/modules/rule";
import Api from "@/api/backend/api";
import XEUtils from "xe-utils";
import initMap from "./mapinit";
const ruleStore = useRuleStore();
  const { gridOptions } = useRepair();
const router = useRouter();
const formRef = ref();

const xGrid = ref();
const gridEvent: VxeGridListeners<RowVO> = {
  proxyQuery() {
    console.log("数据代理查询事件");
    const grid = xGrid.value;
    // 获取表格中的数据
    // const data = grid.getTableData().fullData;
    // console.log(data);
  },
  proxyDelete() {
    console.log("数据代理删除事件");
  },
  proxySave() {
    console.log("数据代理保存事件");
  },
};
const repairForm = ref({
  user_name: "",
  phone: "",
  way: 1,
  id: null,
  order_no: "WXD-" + XEUtils.toDateString(new Date(), `yyyyMMddHHmmss`),
  repair_type_id: null,
  description: "",
  license: "",
  images: [],
  coordinates: {
    type: "Point",
    coordinates: [107.466127, 31.224677],
  },
  address: "",
});
const getData = (param) => {
  repairForm.value.coordinates.coordinates[1] = param.lat;
  repairForm.value.coordinates.coordinates[0] = param.lng;
  repairForm.value.address = param.address;
};

const renderMap = () => {
  setTimeout(() => {
    console.log("2.有值是初始化");
    if (repairForm.value.coordinates?.coordinates[0] == null) {
      repairForm.value.coordinates.coordinates[1] = 107.466127;
      repairForm.value.coordinates.coordinates[0] = 31.224677;
    }

    initMap(getData, [
      repairForm.value.coordinates.coordinates[1],
      repairForm.value.coordinates.coordinates[0],
    ]);
  }, 1000);
};
renderMap();
const changeWay = (event) => {
  console.log(event.target.value);
  if (event.target.value == 2) {
    renderMap();
  }
};

const onSubmit = async () => {
  try {
    //先清空一下验证
    formRef.value.clearValidate();
    await Api.repairController.store(repairForm.value);
    xGrid.value.commitProxy("query");
    formRef.value.resetFields();
  } catch (error) {
    formRef.value.validate();
  }
};
const editRow = (row) => {
  router.push(`/business/repair/${row.id}/edit`);
};
</script>

<style scoped></style>
